<template>
  <div class="app-container">
    <div class="my-table">
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column
          prop="vcreateBy"
          label="申请人"
          width="180"
        />
        <el-table-column
          prop="vflowId"
          label="流程类型"
        />
        <el-table-column
          prop="description"
          label="申请人描述"
        />
        <el-table-column
          prop="sleaveTime"
          width="180"
          label="创建时间"
          :formatter="formatterDate"
        />
        <el-table-column
          prop="eleaveTime"
          width="180"
          label="结束时间"
          :formatter="formatterDate"
        />
        <el-table-column
          prop="status"
          label="状态"
          :formatter="formatterStatus"
        />
        <el-table-column
          label="操作"
          fixed="right"
          width="230"
        >
          <template slot-scope="scope">
            <el-button v-if="scope.row.status===0" size="small" type="primary" @click="onApply(scope,1)">
              通过
            </el-button>
            <el-button v-if="scope.row.status===0" size="small" type="danger" @click="onApply(scope,2)">
              不通过
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="my-page">
        <el-pagination
          :page-sizes="pageSizeList"
          :current-page="page.pageIndex"
          :page-size="page.pageSize"
          :total="page.total"
          background
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import tableMixin from '@/mixins/tableMixin'
import dayjs from 'dayjs'

export default {
  name: 'ApprovalProcess',
  mixins: [tableMixin],
  data() {
    return {
      searchForm: {
        userId: localStorage.getItem('userId')
      },
      dataList: [],
      typeList: [],
      dialogVisible: false,
      remark: ''
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    formatterDate(row, column, cellValue, index) {
      return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    formatterStatus(row, column, cellValue, index) {
      let name = ''
      if (cellValue === 0) {
        name = '未审批'
      } else if (cellValue === 1) {
        name = '已通过'
      } else {
        name = '未通过'
      }

      return name
    },
    getDataList() {
      this.dataListLoading = true
      this.$api.approval.getMyApproveList(
        {
          ...this.searchForm,
          ...this.page
        }
      ).then(res => {
        if (res.code === this.$code) {
          this.page.total = res.data.totalSize
          this.dataList = res.data.content
        }
      }).finally(() => {
        this.dataListLoading = false
      })
    },
    onApply(scope, status) {
      this.$prompt('请输入审批备注', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.$api.approval.posTratifyApi({
          id: scope.row.id,
          userId: localStorage.getItem('userId'),
          status: status,
          remark: value
        }).then(res => {
          if (res.code === this.$code) {
            this.$message({
              type: 'success',
              message: '提交成功'
            })
            this.getDataList()
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>

</style>
